gameInfo = {
    roomId: null,
    thisUserId: null,
    thatUserId: null,
    isWhite: true,
    win : false
}

//////////////////////////////////////////////////
// 设定界面显示相关操作
//////////////////////////////////////////////////

function setScreenText(me) {
    let screen = document.querySelector('#screen');
    if (me) {
        screen.innerHTML = "轮到你落子了!";
    } else {
        screen.innerHTML = "轮到对方落子了!";
    }
}

//////////////////////////////////////////////////
// 初始化 websocket
//////////////////////////////////////////////////
// TODO
let websocketUrl = 'ws://' + location.host + '/game';
let websocket = new WebSocket(websocketUrl);
websocket.onopen = function() {
    console.log("连接游戏房间成功");
    
}
websocket.close = function() {
    console.log("游戏房间关闭");
    
}
websocket.onerror = function() {
    console.log("游戏房间异常关闭");
    
}
window.onbeforeunload = function() {
    websocket.close();
}
websocket.onmessage = function(event) {
    let resp = JSON.parse(event.data);
    if(resp.message != "gameReady") {
        console.log("响应类型错误");
        return;
    }
    if(!resp.ok) {
        alert("游戏连接失败");
        location.assign("/gobang_login.html");
        return;
    }
    if(resp.message == "gameReady") {
        gameInfo.roomId = resp.roomId;
        gameInfo.thisUserId = resp.thisUserId;
        gameInfo.thatUserId = resp.thatUserId;
        gameInfo.isWhite = (resp.whiteUser == resp.thisUserId);
        //初始化棋盘
        initGame();
        setScreenText(gameInfo.isWhite);
    }else if(resp.message == "repeatConnection") {
        alert("账号在别处登录");
        location.assign("/gobang_login.html")
    }
}
//////////////////////////////////////////////////
// 初始化一局游戏
//////////////////////////////////////////////////
function initGame() {
    // 是我下还是对方下. 根据服务器分配的先后手情况决定
    let me = gameInfo.isWhite;
    // 游戏是否结束
    let over = false;
    let chessBoard = [];
    //初始化chessBord数组(表示棋盘的数组)
    for (let i = 0; i < 15; i++) {
        chessBoard[i] = [];
        for (let j = 0; j < 15; j++) {
            chessBoard[i][j] = 0;
        }
    }
    let chess = document.querySelector('#chess');
    let context = chess.getContext('2d');
    context.strokeStyle = "#000000"; // 设置网格线颜色为黑色
    // 背景图片
    let logo = new Image();
    logo.src = "pic/sky.jpeg";
    logo.onload = function () {
        context.drawImage(logo, 0, 0, 450, 450);
        initChessBoard();
    }

    // 绘制棋盘网格
    function initChessBoard() {
        for (let i = 0; i <= 15; i++) { // 修改为 <= 15 以确保最后一行和最后一列都能绘制
            context.moveTo(15 + i * 30, 15);
            context.lineTo(15 + i * 30, 435); // 修改为 435 以确保最后一行能绘制
            context.stroke();
            context.moveTo(15, 15 + i * 30);
            context.lineTo(435, 15 + i * 30); // 修改为 435 以确保最后一列能绘制
            context.stroke();
        }
    }

    // 绘制一个棋子, me 为 true
    function oneStep(i, j, isWhite) {
        context.beginPath();
        context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
        context.closePath();
        var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
        if (!isWhite) {
            gradient.addColorStop(0, "#0A0A0A");
            gradient.addColorStop(1, "#636766");
        } else {
            gradient.addColorStop(0, "#D1D1D1");
            gradient.addColorStop(1, "#F9F9F9");
        }
        context.fillStyle = gradient;
        context.fill();
    }

    chess.onclick = function (e) {
        console.log(gameInfo.win);
        
        if (over) {
            return;
        }
        if (!me) {
            return;
        }
        // 如果已经有人赢了就返回，无需再绘制棋子
        if (gameInfo.win) {
            return;
        }
        let x = e.offsetX;
        let y = e.offsetY;
        // 注意, 横坐标是列, 纵坐标是行
        let col = Math.floor(x / 30);
        let row = Math.floor(y / 30);
        if (chessBoard[row][col] == 0) {
            // TODO 发送坐标给服务器, 服务器要返回结果
            send(row,col);
            oneStep(col, row, gameInfo.isWhite);
            chessBoard[row][col] = 1;
        }
    }
    function send(row,col) {
        let req = {
            message:'putChess',
            userId:gameInfo.thisUserId,
            row:row,
            col:col
        };
        websocket.send(JSON.stringify(req));
    }


    websocket.onmessage = function(event) {
        console.log("[handlerPutChess] " + event.data);
        let resp = JSON.parse(event.data);
        if( resp.message == "drop") {
            let screenDiv = document.querySelector('#screen');
            screenDiv.innerHTML = '对方掉线，你赢了!';
            gameInfo.win = true;
            back();
            return;
        }
        if (resp.message != 'putChess') {
            console.log("响应类型错误!");
            return;
        }
        
        // 先判定当前这个响应是自己落的子, 还是对方落的子.
        if (resp.userId == gameInfo.thisUserId) {
            // 我自己落的子
            // 根据我自己子的颜色, 来绘制一个棋子
            oneStep(resp.col, resp.row, gameInfo.isWhite);
        } else if (resp.userId == gameInfo.thatUserId) {
            // 我的对手落的子
            oneStep(resp.col, resp.row, !gameInfo.isWhite);
        } else {
            // 响应错误! userId 是有问题的!
            console.log('[handlerPutChess] resp userId 错误!');
            return;
        }

        // 给对应的位置设为 1, 方便后续逻辑判定当前位置是否已经有子了. 
        chessBoard[resp.row][resp.col] = 1;

        // 交换双方的落子轮次
        me = !me;
        setScreenText(me);

        // 判定游戏是否结束
        let screenDiv = document.querySelector('#screen');
        if (resp.winner != 0) {
            if (resp.winner == gameInfo.thisUserId) {
                // alert('你赢了!');
                screenDiv.innerHTML = '你赢了!';
            } else if (resp.winner = gameInfo.thatUserId) {
                // alert('你输了!');
                screenDiv.innerHTML = '你输了!';
            } else {
                alert("winner 字段错误! " + resp.winner);
            }
            // 回到游戏大厅
            // location.assign('/game_hall.html');
            // 增加一个按钮, 让玩家点击之后, 再回到游戏大厅~
            gameInfo.win = true;
            back();
        }
    }
    function back() {
        // 创建按钮
        let backBtn = document.createElement('button');
        backBtn.innerHTML = '回到大厅';
    
        // 设置按钮样式
        backBtn.style.padding = '10px 30px'; // 增加水平方向的内边距，让按钮更长
        backBtn.style.fontSize = '16px'; // 设置字体大小
        backBtn.style.backgroundColor = '#4CAF50'; // 设置背景颜色（绿色）
        backBtn.style.color = 'white'; // 设置字体颜色（白色）
        backBtn.style.border = 'none'; // 去掉边框
        backBtn.style.borderRadius = '5px'; // 设置圆角
        backBtn.style.cursor = 'pointer'; // 鼠标悬停时显示手型
        backBtn.style.transition = 'background-color 0.3s'; // 添加背景颜色过渡效果
        backBtn.style.width = '100%'; // 设置按钮宽度为父容器的100%，让按钮更长
        backBtn.style.marginTop = '20px'; // 设置按钮与上方内容的间距
    
        // 设置按钮的点击事件
        backBtn.onclick = function() {
            location.replace('/game_hall.html');
        };
    
        // 将按钮添加到页面中
        let fatherDiv = document.querySelector('.container>div');
        fatherDiv.appendChild(backBtn);
    }
}

